/**
 * 更多数据弹窗 - 提供筛选、排序、导出等功能
 */
import React, { useState } from 'react';
import { X, Filter, Download, BarChart3 } from 'lucide-react';

interface StoreRow {
  rank: number;
  name: string;
  visitors: string;
  rate: string;
}

interface MoreDataModalProps {
  isOpen: boolean;
  onClose: () => void;
  stores: StoreRow[];
  onExport?: (format: 'csv' | 'excel') => void;
}

const MoreDataModal: React.FC<MoreDataModalProps> = ({ isOpen, onClose, stores, onExport }) => {
  const [selectedFilters, setSelectedFilters] = useState({
    minRate: '',
    maxRate: '',
    dateRange: '30'
  });

  const handleExport = (format: 'csv' | 'excel') => {
    if (onExport) {
      onExport(format);
    } else {
      // 默认导出逻辑
      const csvContent = [
        ['排名', '门店名称', '访客数', '日增率'],
        ...stores.map(store => [
          store.rank.toString(),
          store.name,
          store.visitors,
          store.rate
        ])
      ].map(row => row.join(',')).join('\n');

      const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      const url = URL.createObjectURL(blob);
      link.setAttribute('href', url);
      link.setAttribute('download', `门店数据_${new Date().toISOString().split('T')[0]}.${format === 'csv' ? 'csv' : 'xlsx'}`);
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  };

  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200"
        onClick={(e) => e.stopPropagation()}
      >
        {/* 头部 */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
          <div>
            <h3 className="text-xl font-bold text-gray-800 mb-1">更多数据选项</h3>
            <p className="text-sm text-gray-600">数据筛选、导出和分析</p>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-white/80 rounded-lg transition-all hover:scale-110"
          >
            <X size={20} className="text-gray-600" />
          </button>
        </div>

        {/* 内容区域 */}
        <div className="p-6 space-y-6">
          {/* 数据筛选 */}
          <div>
            <div className="flex items-center gap-2 mb-4">
              <Filter size={18} className="text-gray-600" />
              <h4 className="text-lg font-semibold text-gray-800">数据筛选</h4>
            </div>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">日增率范围</label>
                <div className="flex items-center gap-2">
                  <input
                    type="number"
                    placeholder="最小值"
                    value={selectedFilters.minRate}
                    onChange={(e) => setSelectedFilters({ ...selectedFilters, minRate: e.target.value })}
                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                  <span className="text-gray-500">至</span>
                  <input
                    type="number"
                    placeholder="最大值"
                    value={selectedFilters.maxRate}
                    onChange={(e) => setSelectedFilters({ ...selectedFilters, maxRate: e.target.value })}
                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">时间范围</label>
                <div className="flex items-center gap-2">
                  {['7', '30', '90', 'all'].map((days) => (
                    <button
                      key={days}
                      onClick={() => setSelectedFilters({ ...selectedFilters, dateRange: days })}
                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                        selectedFilters.dateRange === days
                          ? 'bg-blue-500 text-white'
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                    >
                      {days === 'all' ? '全部' : `最近${days}天`}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* 数据导出 */}
          <div>
            <div className="flex items-center gap-2 mb-4">
              <Download size={18} className="text-gray-600" />
              <h4 className="text-lg font-semibold text-gray-800">数据导出</h4>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <button
                onClick={() => handleExport('csv')}
                className="flex items-center justify-center gap-2 px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
              >
                <Download size={18} />
                导出 CSV
              </button>
              <button
                onClick={() => handleExport('excel')}
                className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
              >
                <Download size={18} />
                导出 Excel
              </button>
            </div>
          </div>

          {/* 数据分析 */}
          <div>
            <div className="flex items-center gap-2 mb-4">
              <BarChart3 size={18} className="text-gray-600" />
              <h4 className="text-lg font-semibold text-gray-800">数据分析</h4>
            </div>
            <div className="grid grid-cols-3 gap-4">
              <div className="bg-blue-50 rounded-xl p-4 border border-blue-200">
                <div className="text-xs text-gray-600 mb-1">平均日增率</div>
                <div className="text-xl font-bold text-blue-600">
                  {(stores.reduce((sum, s) => sum + parseFloat(s.rate.replace('%', '')), 0) / stores.length).toFixed(1)}%
                </div>
              </div>
              <div className="bg-green-50 rounded-xl p-4 border border-green-200">
                <div className="text-xs text-gray-600 mb-1">总访客数</div>
                <div className="text-xl font-bold text-green-600">
                  {stores.reduce((sum, s) => sum + parseFloat(s.visitors.replace('w+', '')), 0).toFixed(1)}w+
                </div>
              </div>
              <div className="bg-purple-50 rounded-xl p-4 border border-purple-200">
                <div className="text-xs text-gray-600 mb-1">门店总数</div>
                <div className="text-xl font-bold text-purple-600">
                  {stores.length}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 底部 */}
        <div className="p-4 border-t border-gray-200 bg-gray-50">
          <div className="flex items-center justify-end gap-3">
            <button
              onClick={onClose}
              className="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
            >
              关闭
            </button>
            <button
              onClick={() => {
                // 应用筛选
                console.log('应用筛选:', selectedFilters);
                onClose();
              }}
              className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
            >
              应用筛选
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MoreDataModal;




















